<template>
    <ElForm class="shop-item" label-width="100px" label-position="left">
        <div class="shop-item-header">
            <div class="shop-item-title">
                <div style="font-size: 18px;font-weight: bold;">{{ data.dpmc }}</div>
            </div>
            <div>
                <ElButton type="primary" v-if="auth.has('edit')" link @click="$emit('edit')">编辑</ElButton>
            </div>
        </div>

        <ElRow>
            <ElCol :span="6">
                <ElFormItem label="发票类型">{{ data.fplxName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="票面税点">{{ data.pmsdName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="公司名称">{{ data.gsmc }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="统一社会信用代码">{{ data.tyshxydm }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="银行账号">{{ data.yhzh }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="开户银行">{{ data.khyh }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="联行号">{{ data.lhh }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="公司地址">{{ data.gsdz }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="邮箱">{{ data.youxiang }}</ElFormItem>
            </ElCol>
        </ElRow>

    </ElForm>
</template>

<script setup lang="ts">
import { ElButton, ElRow, ElCol, ElForm, ElFormItem } from 'element-plus'
import { useAuth } from '@/utils/auth'

const auth = useAuth()

interface Props {
    data: object
}

const props = withDefaults(defineProps<Props>(), {
    data: () => ({})
})

const data = props.data as any

</script>

<style scoped lang="scss">
.shop-item {
    padding-top: 18px;
    margin-bottom: 18px;

    &+& {
        border-top: 1px solid #E1E1E1;
        ;
    }

    &-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &-title {
        display: flex;
        align-items: center;
        font-family: PingFangSC-Medium;
        font-weight: 1000;
        font-size: 16px;
        color: #333333;
    }

    &-tag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 22px;
        background: #094DB2;
        border-radius: 2px;
        font-family: PingFangHK-Regular;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        text-align: right;
        margin-right: 5px;
    }

    :deep(.el-form-item__label) {
        font-family: PingFangSC-Regular;
        font-weight: 500;
        font-size: 12px;
        width: 120px !important;
        color: #666666;
        text-align: right;
    }

    :deep(.el-form-item__content) {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 12px;
        color: #333333;
    }

}
</style>
